<template>
    <div class="city">
        <city-header></city-header>
        <city-search :cities="cities"></city-search>
        <city-list :letterTxt="letter"></city-list>
        <alphabet @change="handleLetter"></alphabet>
    </div>
</template>
<script>
import axios from 'axios'
import cityHeader from "./components/cityHeader"
import citySearch from './components/search'
import cityList from './components/cityList'
import Alphabet from './components/Alphabet'
export default {
    name:'city',
    components:{
        cityHeader,
        citySearch,
        cityList,
        Alphabet
    },
    data(){
        return {
            letter:'',
            cities:{}
        }
    },
    created(){
        this.getData()
    },
    methods:{
        handleLetter(obj){
            this.letter=obj
        },
        getData(){
            axios.get('/api/city.json').then((res)=>{
                this.cities=res.data.data.cities
            })
        }
    }
}
</script>
<style scoped>
.city{
    background: #f5f4f4
}
</style>